"use client"

import React from 'react'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription
} from '@/components/ui/dialog'
import { DIALOG_CONTENT } from '@/lib/constants/bottom-navigation'

interface UsageDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
}

/**
 * 使用方法弹窗组件
 * 显示网站的使用说明和操作指南
 */
export function UsageDialog({ open, onOpenChange }: UsageDialogProps) {
  // 分段显示内容，提高可读性
  const contentSections = DIALOG_CONTENT.usage.content.split('\n\n')

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="text-xl font-semibold">
            {DIALOG_CONTENT.usage.title}
          </DialogTitle>
          {/* <DialogDescription className="text-sm text-muted-foreground">
            了解如何使用Hello123导航网站的各项功能
          </DialogDescription> */}
        </DialogHeader>
        
        <div className="mt-4 space-y-4">
          {contentSections.map((section, index) => {
            // 检查是否是标题行
            const isNumberedItem = /^\d+、/.test(section.trim())
            const isNote = section.trim().startsWith('注：')
            
            return (
              <div
                key={index}
                className={`text-sm leading-relaxed ${
                  isNote 
                    ? 'text-orange-600 dark:text-orange-400 font-medium bg-orange-50 dark:bg-orange-950/20 p-3 rounded-md border border-orange-200 dark:border-orange-800'
                    : isNumberedItem
                    ? 'pl-4 border-l-2 border-primary/20'
                    : ''
                }`}
              >
                {section.split('\n').map((line, lineIndex) => {
                  // 处理缩进行
                  const isIndented = line.trim().startsWith('不输入关键词')
                  
                  return (
                    <div
                      key={lineIndex}
                      className={`${
                        isIndented ? 'ml-4 text-muted-foreground text-xs mt-1' : ''
                      } ${lineIndex > 0 ? 'mt-2' : ''}`}
                    >
                      {line.trim()}
                    </div>
                  )
                })}
              </div>
            )
          })}
          
          {/* 额外的使用提示 */}
          <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-950/20 rounded-lg border border-blue-200 dark:border-blue-800">
            <h4 className="text-sm font-medium text-blue-900 dark:text-blue-100 mb-2">
              💡 使用技巧
            </h4>
            <ul className="text-xs text-blue-700 dark:text-blue-300 space-y-1">
              <li>• 搜索框支持中英文混合输入</li>
              <li>• 可以使用键盘快捷键 Tab 在按钮间切换</li>
              <li>• 按 Escape 键可关闭当前弹窗</li>
              <li>• 支持深色/浅色主题切换</li>
            </ul>
          </div>
          
          {/* 快捷键说明 */}
          <div className="mt-4 p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg border border-gray-200 dark:border-gray-700">
            <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">
              ⌨️ 快捷键
            </h4>
            <div className="grid grid-cols-2 gap-2 text-xs">
              <div className="flex justify-between">
                <span className="text-muted-foreground">回车键</span>
                <span className="font-mono bg-white dark:bg-gray-800 px-1 rounded">Enter</span>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">关闭弹窗</span>
                <span className="font-mono bg-white dark:bg-gray-800 px-1 rounded">Esc</span>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">切换按钮</span>
                <span className="font-mono bg-white dark:bg-gray-800 px-1 rounded">Tab</span>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">切换搜索引擎</span>
                <span className="text-muted-foreground">点击logo</span>
              </div>
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
} 